<template>
  <el-config-provider :locale="zhCn">
    <div id="app">
      <el-container class="app-container">
        <!-- 顶部导航栏 -->
        <el-header class="app-header">
          <div class="header-content">
            <div class="logo">
              <el-icon :size="28" style="margin-right: 10px">
                <DataAnalysis />
              </el-icon>
              <h1>BMC实验管理平台</h1>
            </div>
            <el-menu
              :default-active="activeMenu"
              mode="horizontal"
              :ellipsis="false"
              background-color="#409EFF"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
            >
            <el-menu-item index="/monitoring">
                <el-icon><Monitor /></el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-menu-item index="/experiment-templates">
                <el-icon><DocumentCopy /></el-icon>
                <span>实验模板</span>
              </el-menu-item>
              <el-menu-item index="/workflow-templates">
                <el-icon><Connection /></el-icon>
                <span>工作流模板</span>
              </el-menu-item>
              <el-menu-item index="/roma-pools">
                <el-icon><CopyDocument /></el-icon>
                <span>ROMA 资源池</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-header>

        <!-- 主内容区 -->
        <el-main class="app-main">
          <router-view />
        </el-main>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const route = useRoute()

// 根据当前路由计算应该高亮的菜单项
const activeMenu = computed(() => {
  const path = route.path

  // 提取路径的第一段作为菜单匹配项
  // 例如: /workflows/1/edit -> /workflows
  //      /experiment-templates/create -> /experiment-templates
  const match = path.match(/^\/[^/]+/)
  return match ? match[0] : path
})
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.app-container {
  height: 100%;
}

.app-header {
  background-color: #409EFF;
  color: white;
  padding: 0;
  height: 60px !important;

  .header-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;

    .logo {
      display: flex;
      align-items: center;
      margin-right: 50px;

      h1 {
        font-size: 20px;
        font-weight: 500;
      }
    }

    .el-menu {
      flex: 1;
      border: none;
    }
  }
}

.app-main {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-y: auto;
}
</style>
